<template>
	<view>
		<view class="swiper">
			<image :src="info.image_text" mode="aspectFill"></image>
		</view>
		<view class="block_1">
			<view class="time flex_jc_sb">
				<view class="time_l flex">
					<image src="/static/z.png" mode="sc"></image>
					距离报名结束还有
				</view>
				<view class="time_r">
					<view class="iv">{{timedata.days}}</view>
					<view class="ivs">日</view>
					<view class="iv">{{timedata.hours}}</view>
					<view class="ivs">时</view>
					<view class="iv">{{timedata.minutes}}</view>
					<view class="ivs">分</view>
					<view class="iv">{{timedata.secs}}</view>
					<view class="ivs">秒</view>
				</view>
			</view>
			<view class="title">
				{{info.title}}
			</view>
			<view class="ftit">
				<view class="price">
					<text>￥</text>{{info.price}}
				</view>
				<view class="btns b1" v-if="info.state_text == 2 && info.meetorder_start == 3">
					已报名
				</view>
				<view class="btns b3" v-if="info.state_text == 2 && info.meetorder_start !=3">
					报名中
				</view>
				<view class="btns b5" v-if="info.state_text == 1">
					未开始
				</view>
				<view class="btns b5" v-if="info.state_text == 3">
					已结束
				</view>
				<view class="btn2">
					线下活动
				</view>
			</view>
			<view class="" style="padding: 0rpx 20rpx;">
				<view class="flex" style="margin-top: 20rpx;">
					<image class="icon" src="/static/c1.png" mode=""></image>
					<view class="text">
						{{time(info.start_time)}}
					</view>
				</view>
				<view class="flex_jc_sb" style="margin-top: 20rpx;">
					<view class="flex">
						<image class="icon" src="/static/c2.png" mode=""></image>
						<view class="text">
							{{info.city}}
						</view>
					</view>
					<view class="flex" @click="$opennavigation(info.longitude_latitude)">
						<image class="icon" src="/static/c2.png" mode=""></image>
						<view class="text">
							导航
						</view>
					</view>
				</view>
			</view>
		</view>



		<view class="imgs">
			<view class="imgs_flex">
				<view class="" style="height: 60rpx;">
					<view class="people">
						已报名：{{info.people_number}}人
					</view>
				</view>
				<image v-for="(item,index) in info.user_avatar" :key="item" :src="item" mode="aspectFill"></image>
				<image v-if="info.people_number>15" style="width: 64rpx;
			height: 64rpx;border:none" src="/static/sl.png" mode=""></image>
			</view>
		</view>
		<view class="html" v-html="info.content">

		</view>

		<view class="footer_kf">
			<view class="cont flex_jc_sb">
				<view class="kf">
					<image src="/static/fx.png" mode=""></image>
					<view class="">
						分享
					</view>
					<button class="adsbtn" open-type="share"></button>
				</view>
				<view class="kf" @click="phoneCall(info.mobile)">
					<image src="/static/dh.png" mode=""></image>
					<view class="">
						电话
					</view>
				</view>
				<view class="btn b5" v-if="info.state_text == 1">
					未开始
				</view>
				<view @click="gosignup" class="btn b1" v-if="info.state_text == 2 &&info.meetorder_start == 0">
					立即报名
				</view>
				<view class="btn b5" v-if="info.state_text == 3">
					已结束
				</view>
				<view class="btn b1" v-if="info.state_text == 2 &&info.meetorder_start == 1">
					待审核
				</view>
				<view class="btn b6" v-if="info.state_text == 2 &&info.meetorder_start == 3">
					已报名
				</view>
				<view class="btn b3" 
				@click="$pageGo(`/pages/business/businesssb?content=${info.meetorder.reject_reason}`)"
				
				v-if="info.state_text == 2 &&info.meetorder_start == 5">
					查看驳回原因
				</view>
				<view @click="handleCreateOrder" class="btn b6" v-if="info.state_text == 2 &&info.meetorder_start == 2">
					立即支付 {{info.price}}
				</view>
			</view>
		</view>
		<uni-popup ref="popups" type="center">
			<view class="popups">
				<image src="/static/yes.png" mode=""></image>
				<view class="t1">
					报名成功
				</view>
				<view class="t2">
					线上报名已申请，请您耐心等待审核
				</view>
				<view class="t3" @click="close">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload,
		onHide
	} from '@dcloudio/uni-app'
	import {
		getMeetingDetail,signup,paymeeting
	} from '@/common/http.api.js';
  import {chattering} from '@/common/cont.js'
	const time = computed(() => {
		return (tt) => {
			let timenum = tt * 1000
			const date = new Date(timenum);
			// 补零函数
			const padZero = num => num.toString().padStart(2, '0');
			// 提取日期各部分
			const year = date.getFullYear();
			const month = padZero(date.getMonth() + 1); // 月份从0开始需+1
			const day = padZero(date.getDate());
			const hours = padZero(date.getHours());
			const minutes = padZero(date.getMinutes());
			const seconds = padZero(date.getSeconds());
			// 周几映射（0: 周日，1: 周一，...）
			const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
			const weekday = weekdays[date.getDay()];
			// 拼接格式：YYYY-MM-DD HH:mm:ss 周X
			return `${month}/${day} ${hours}:${minutes} | 周${weekday}`;
		}
	})

	const info = ref({})
	const id = ref()
	onShow(() => {
		getMeetingDetail({
			id: id.value
		}).then(res => {
			info.value = res.data
			startCountdown(res.data.surplus_time)
		})
	})
	onLoad((option) => {
		id.value = option.id
	})
	onUnload(() => {
		clearInterval(timer.value);
	})
	onHide(() => {
		clearInterval(timer.value);
	})
	function phoneCall(phone){
		uni.makePhoneCall({
			phoneNumber: phone, //仅为示例
			success: function() {
				console.log('success');
			}
		});
	}
	//下单
	function handleCreateOrder() {
		uni.showLoading({
			title:'支付中...'
		})
		chattering(() => {
			paymeeting({
				meeting_id:id.value
			}).then(res => {
				console.log(res);
				if (res.code == 1) {
						uni.hideLoading()
					uni.requestPayment({
						"provider": "wxpay", //固定值为"wxpay"
						appid: res.data.appId, // 应用ID（AppID）
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						signType: res.data.signType, // 签名，这里用的 MD5 签名
						paySign: res.data.paySign,
						success: function(res) {
							uni.showToast({
								icon: 'none',
								title: '支付成功'
							})
							setTimeout(()=>{
								getMeetingDetail({
									id: id.value
								}).then(res => {
									info.value = res.data
									startCountdown(res.data.surplus_time)
								})
							},1000)
							
						},
						fail: function(err) {
							uni.showToast({
								icon: 'none',
								title: '支付取消'
							})
						}
					});
				}
			})
		})
	
	}
	
	const popups = ref(null)
	
	function close() {
		popups.value.close()
	}
	function gosignup(){
		if(uni.getStorageSync('cirleToken')){
				signup({meeting_id:id.value}).then(res=>{
					if(res.code == 1){
						popups.value.open()
						getMeetingDetail({
							id: id.value
						}).then(res => {
							info.value = res.data
							startCountdown(res.data.surplus_time)
						})
					}
				})
		}else{
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
		
	}


	const timer = ref(null)
	const timedata = reactive({
		days: 0,
		hours: 0,
		minutes: 0,
		secs: 0,
	})

	function formatCountdown(seconds) {
		// 处理参数：确保是整数且非负数
		let totalSeconds = Math.max(0, parseInt(seconds, 10) || 0);
		const days = Math.floor(totalSeconds / 86400);
		totalSeconds %= 86400;
		// 计算时分秒
		const hours = Math.floor(totalSeconds / 3600)
		totalSeconds %= 3600;
		const minutes = Math.floor(totalSeconds / 60);
		const secs = totalSeconds % 60;
		// 补零函数
		const pad = (num) => num.toString().padStart(2, '0');
		timedata.days = pad(days)
		timedata.hours = pad(hours)
		timedata.minutes = pad(minutes)
		timedata.secs = pad(secs)
		// 返回格式化字符串
		// return `${pad(days)}天${pad(hours)}时${pad(minutes)}分${pad(secs)}秒`;
	}

	function startCountdown(date) {
		let seconds = date // 初始秒数
		timer.value = setInterval(() => {
			if (seconds <= 0) {
				clearInterval(timer.value);
				return;
			}
			seconds--;
			formatCountdown(seconds);
		}, 1000);
	}



</script>
<script>
	export default {
		onShareAppMessage() {
			return {
				title: '大会详情！',
				path: `/mainPage/meetingdetail?id=${this.id}`,
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FC;
	}

	.swiper {
		width: 710rpx;
		margin: 20rpx auto;

		image {
			width: 710rpx;
			height: 340rpx;
			border-radius: 20rpx;
		}
	}

	.block_1 {
		width: 710rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding-bottom: 20rpx;

		.time {
			width: 710rpx;
			height: 100rpx;
			background: linear-gradient(90deg, #58C7FF 0%, #090DED 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 30rpx 10rpx 22rpx 20rpx;
			box-sizing: border-box;

			.time_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 12rpx;
				}
			}

			.time_r {
				display: flex;
				align-items: center;

				.iv {
					width: 56rpx;
					height: 56rpx;
					background: rgba(255, 255, 255, 0.5);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					text-align: center;
					line-height: 56rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
				}

				.ivs {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					margin: 0rpx 10rpx;
				}
			}
		}

		.title {
			padding: 20rpx 20rpx 10rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}

		.ftit {
			padding: 0rpx 20rpx;
			display: flex;
			align-items: center;

			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 48rpx;
				color: #FF2352;

				text {
					font-size: 28rpx;
				}
			}

			.btns {
				width: 120rpx;
				height: 48rpx;
				background: #FF2352;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				line-height: 48rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				margin: 0 20rpx;
			}

			.b1 {
				background: #FFFFFF;
				border: 1px solid #0756FF;
				color: #0756FF;
			}

			.b2 {
				background: #FF2352;
				color: #fff;
			}

			.b3 {
				background: #0756FF;
				color: #fff;
			}

			.b4 {
				background: #fff;
				border: 1px solid #D1D1D6;
				color: #D1D1D6;
			}

			.b5 {
				background: #D1D1D6;
				color: #fff;
			}

			.btn2 {
				width: 148rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1px solid #0756FF;
				line-height: 48rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #0756FF;
			}
		}

		.icon {
			width: 28rpx;
			height: 28rpx;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #616169;
			margin-left: 10rpx;
		}
	}

	.imgs {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 16rpx 20rpx 6rpx 20rpx;
		box-sizing: border-box;
		
		.imgs_flex{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		.people {
			width: 164rpx;
			height: 48rpx;
			background: linear-gradient(90deg, #58C7FF 0%, #090DED 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			text-align: center;
		}

		image {
			width: 60rpx;
			height: 60rpx;
			margin-left: 8rpx;
			margin-bottom: 10rpx;
			border: 1px solid #0756FF;
			border-radius: 30rpx;
		}
	}

	.html {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		margin: 20rpx auto;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.footer_kf {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			padding: 10rpx 30rpx 10rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			height: 120rpx;
			color: #000000;

			.kf {
				width: 60rpx;
				height: 100rpx;
				position: relative;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				font-family: PingFang SC,
				PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #545454;

				.adsbtn {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					top: 0%;
					opacity: 0;
				}
			}

			.btn {
				width: 480rpx;
				height: 80rpx;
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}

			.b1 {
				background: #0756FF;
				color: #fff;
			}

			.b2 {
				border: 1px solid #0756FF;
				background: #fff;
				color: #0756FF;
			}

			.b3 {
				border: 1px solid #FF2352;
				background: #fff;
				color: #FF2352;
			}

			.b4 {
				border: 1px solid #D1D1D6;
				background: #fff;
				color: #D1D1D6;
			}

			.b5 {
				background: #D1D1D6;
				color: #fff;
			}

			.b6 {
				background: #FF2352;
				color: #fff;
			}
		}
	}

	.popups {
		width: 600rpx;
		height: 500rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 52rpx;
		box-sizing: border-box;
		text-align: center;

		image {
			width: 124rpx;
			height: 122rpx;
		}

		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			margin-top: 24rpx;
		}

		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #B5B5BB;
			margin-top: 14rpx;
		}

		.t3 {
			width: 320rpx;
			height: 80rpx;
			background: #0756FF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin: 80rpx auto 0rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>